<template>
  <div class="m-nav">
    <div class="m-nav-list">
   		<div class="m-nav-scroll">
   			<div class="m-nav-item" v-for="(item, index) in navList" :class="{'m-nav-item-active': isActive === index}" :key="index" @click="isActive = index">{{item}}</div>
   		</div>
    </div>
    <div class="m-nav-menu">
    	<img src="../../../assets/image/menu.png" border="0">
    </div>
  </div>
</template>

<script>
export default {
  name: 'mall-nav',
  data () {
    return {
    	isActive: 0,
      navList: [
        '地方特产',
        '食品饮料',
        '生鲜果蔬',
        '每日上新',
        '特价秒杀',
        '地方特产',
        '食品饮料',
        '生鲜果蔬',
        '每日上新',
        '特价秒杀'
      ]
    }
  }
}
</script>

<style scoped lang="less">
.m-nav{
	border-bottom: 1px solid #eee;
	position: relative;
	height: .88rem;
  background: #fff;
	.m-nav-item{
		font-size: .30rem;
		margin-right: .28rem;
		line-height: .88rem;
		position: relative;
		color: #666;
		-webkit-tap-highlight-color: transparent;
		&.m-nav-item-active{
			color: #333333;
			&:after{
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
				height: 2px;
				background: red;
				width: .5rem;
			}
		}
	}
	.m-nav-list{
		padding-right: 1.2rem;
	}
	.m-nav-scroll{
		padding: 0 0 0 .28rem;
		display: flex;
		overflow-y: auto;
		white-space: nowrap;
		height: .88rem;
		-webkit-overflow-scrolling: touch;
	}
	.m-nav-menu{
		position: absolute;
		width: 1.2rem;
		height: .88rem;
		background: #fff;
		top: 0;
		right: 0;
		z-index: 1;
		&:after{
			content: '';
			position: absolute;
			z-index: 1;
			display: block;
			width: .3rem;
			height: 100%;
			top: 0;
			left: -.3rem;
			background: rgba(255,255,255,.6);
		}
	}
	.m-nav-menu{
		img{
			display: block;
			width: .4rem;
			margin-left: .52rem;
			margin-top: .25rem;
		}
	}
}
</style>
